import React, { useEffect, useMemo, useState } from 'react';
import { useRouter } from 'next/router';
import { Form, Input, Select, Button, DatePicker, message } from 'antd';
import { storyOptions } from '@/utils/data';
import { addStoryApi } from '@/request/gitlab';
import dayjs from 'dayjs';
import { v4 } from 'uuid';

const StoryEdit = (props) => {
  const router = useRouter();
  const [form] = Form.useForm();

  const formatDate = (date) => dayjs(date).format('YYYY-MM-DD');

  const onFinish = async () => {
    const data = form.getFieldsValue();
    const temp = {
      ...data,
      custom_field_11: formatDate(data.custom_field_11),
      custom_field_12: formatDate(data.custom_field_12),
      custom_field_13: formatDate(data.custom_field_13),
      custom_field_14: formatDate(data.custom_field_14),
      online_time: formatDate(data.online_time),
      custom_field_two: formatDate(data.custom_field_two),
      id: v4(),
      created: dayjs().format('YYYY-MM-DD HH:mm:ss'),
      source: 'local',
    };

    try {
      const res: any = await addStoryApi(temp);
      if (res) {
        message.success('保存成功');
        router.push('/storyManage');
      } else {
        message.error('保存失败');
      }
    } catch (err: any) {
      console.log(err.message);
    }
  };

  return (
    <div className="story-edit" style={{ width: '1000px' }}>
      <div>自创建需求</div>
      <Form
        labelCol={{ span: 4 }}
        wrapperCol={{ flex: '500px' }}
        layout="horizontal"
        form={form}
        onFinish={() => {
          onFinish();
        }}
      >
        <Form.Item label="需求名称" name="name">
          <Input placeholder="请输入" />
        </Form.Item>
        <Form.Item label="需求状态" name="status">
          <Select options={storyOptions} placeholder="请选择"></Select>
        </Form.Item>
        {/* <Form.Item label="开发状态" name="develop_status">
          <Select options={developStatus} placeholder="请选择"></Select>
        </Form.Item> */}
        <Form.Item label="开发开始时间" name="custom_field_11">
          <DatePicker placeholder="请选择时间" style={{ width: '100%' }} />
        </Form.Item>
        <Form.Item label="联调时间" name="custom_field_12">
          <DatePicker placeholder="请选择时间" style={{ width: '100%' }} />
        </Form.Item>
        <Form.Item label="验收时间" name="custom_field_14">
          <DatePicker placeholder="请选择时间" style={{ width: '100%' }} />
        </Form.Item>
        <Form.Item label="可发灰度时间" name="custom_field_13">
          <DatePicker placeholder="请选择时间" style={{ width: '100%' }} />
        </Form.Item>
        {/* <Form.Item label="期望上线时间" name="excpect_online_time">
          <DatePicker placeholder="请选择时间" style={{ width: '100%' }} disabled />
        </Form.Item> */}
        <Form.Item label="提测时间" name="custom_field_two">
          <DatePicker placeholder="请选择时间" style={{ width: '100%' }} />
        </Form.Item>
        <Form.Item label="上线时间" name="online_time">
          <DatePicker placeholder="请选择时间" style={{ width: '100%' }} />
        </Form.Item>
      </Form>
      <div style={{ marginLeft: '166px' }}>
        <Button
          type="primary"
          onClick={() => {
            onFinish();
          }}
          style={{ marginRight: '30px' }}
        >
          保存
        </Button>
        <Button
          onClick={() => {
            router.back();
          }}
        >
          取消
        </Button>
      </div>
    </div>
  );
};

export default StoryEdit;
